<!--睡眠分期图-->
<template>
  <div id="sleep-day-chart" class="chart">
    <div class="title-div">
      <span class="title">睡眠分期图</span>
      <span class="unit"></span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineProps, onMounted, watch} from 'vue';
import * as echarts from 'echarts';
import moment from "moment";
import {numberToTime} from "@/utils/dates";

const props = defineProps({
  chartData: {
    type: Array,
    default: [],
  },
});
onMounted(() => {
  init();
});

watch(
    () => props.chartData,
    (v) => {
      init();
    },
    {deep: true},
);
/**
 * 初始化函数
 * */
const init = async () => {
  const chart = echarts.init(document.getElementById('sleep-day-chart'));
  //三种状态的颜色
  let colors = ["#6D6DF1", "#5384FE", "#7DA6FE", "#FFC03A", '#FF0000'];
  //三种状态
  //三种状态
  const state = ['深睡', '浅睡', '快速眼动', '觉醒', '清醒'];
  console.log('props.chartData', props.chartData)
  const data = props.chartData[0]
  chart.setOption({
    color: colors,
    tooltip: {
      //提示框
      formatter(params: any) {
        console.log('formatter', params)
        let endTime = moment(params.value[2])
        let startTime = moment(params.value[1])
        const difference = endTime.diff(startTime, 'seconds')
        const timeFormat = numberToTime(difference)
        return `${params.name}：${timeFormat}`;
      },
    },
    legend: {
      //图例
      data: state,
      bottom: '1%',
      selectedMode: false, // 图例设为不可点击
      textStyle: {
        color: '#000',
      },
    },
    grid: {
      //绘图网格
      left: '3%',
      right: '3%',
      top: '1%',
      bottom: '10%',
      containLabel: true,
    },
    xAxis: {
      type: 'time',
      interval: (3600 * 1000),   //以一个小时递增
      min: data.value[1], //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
      axisLabel: {
        formatter(value) {
          const date = new Date(value);
          return `${getTime(date.getHours())}:00`;

          function getTime(num) {
            if (parseInt(num) < 10) {
              num = `0${num}`;
            }
            return num;
          }
        },
      },
    },
    yAxis: {
      type: "category",
      data: state,
    },
    series: [
      // 用空bar来显示三个图例
      {name: state[0], type: 'bar', data: []},
      {name: state[1], type: 'bar', data: []},
      {name: state[2], type: 'bar', data: []},
      {name: state[3], type: 'bar', data: []},
      {
        type: 'custom',
        renderItem(params, api) {
          //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
          const categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
          const start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
          const end = api.coord([api.value(2), categoryIndex]);
          const height = api.size([0, 1])[1];

          return {
            type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
            shape: echarts.graphic.clipRectByRect(
                {
                  // 矩形的位置和大小。
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0] || 1,
                  height,
                },
                {
                  // 当前坐标系的包围盒。
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height,
                },
            ),
            style: api.style(),
          };
        },
        encode: {
          x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
          y: 0, // data 中『维度0』对应到 Y 轴
        },
        data: props.chartData,
      },
    ],
  });
};
</script>

<style lang="less" scoped>
.chart {
  position: relative;
  border: 1px solid rgba(198, 202, 209, 0.5);
  border-radius: 8px;
  padding: 70px 20px 20px 20px;
  height: 420px;

  .title-div {
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    flex-direction: column;

    .title {
      font-weight: bold;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 10px;
    }

    .unit {
      color: #8b96a6;
      font-size: 12px;
    }
  }
}
</style>
